<template>
    <div class="outer_inner">
      <div class="par_block">
        <vue-particles         
        color="#e6b422"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#409EFF"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        >
        </vue-particles>
      </div>
      <div class="inner_box">
<!--          登录-->
          <el-form :model="loginForm" status-icon :rules="loginFromRules" ref="loginForm" label-width="100px" class="demo-ruleForm login-container">
            <h3 class="login_title">欢迎来到华倩管理登录界面</h3>
            <el-form-item  prop="username" class="item-padding">
              <el-input type="text"  prefix-icon="iconfont el-icon-user-solid" v-model="loginForm.username" auto-complete="on" placeholder=" 请输入登录账号" ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="item-padding">              
              <el-input type="password"  v-model="loginForm.password" auto-complete="off" placeholder=" 请输入登录密码" show-password >
                <i slot="prefix" class="el-icon-alimima"></i>
              </el-input>
            </el-form-item>
            <el-form-item  prop="code"  style="width:350px;" >
              <el-input type="text"  v-model="loginForm.code" auto-complete="off" style="display:inline-block;width:150px;" placeholder=" 请输入验证码" >
                <i slot="prefix" class="el-icon-aliyanzhengma"></i>
              </el-input>
              <div style="display:inline-block;width:100px;float: right;" @click="saveCaptcha" >
                <img :src="captchaImg" >
              </div>
            </el-form-item> 
            <el-form-item class="item-padding">
              <el-button type="primary" @click="login('loginFromRules')">登录</el-button>
              <el-button @click="resetForm('ruleloginFromRulesForm')">重置</el-button>
            </el-form-item>
          </el-form>
      </div>      
    </div>

</template>

<script>
//写法一，每个方法名字前边都加一个export，导入时需要使用import {方法名1,方法名2} from '引用文件路径'，缺点是方法太多时，需要写入大量繁琐重复的工作
//写法二，写一个总的 export default，导入时使用 import 引用名 from '引用文件路径'
import user from '../../api/user'
import menu from '../../api/menu.js'
import {fnAddDynamicMenuRoutes} from '@/api/getAsyncRouter'
import qs from 'qs'
import log from '../../api/log.js'

export default {
  name: "Login",
  data(){
    return{
      loginForm: {
        username: '',
        password: '',
        code:''
      },
      captchaImg:'',
      //表单校验规则
      loginFromRules: {
        password: [
          { required: true,message:'请输入账户密码', trigger: 'blur' },
          { min:5, max:16, message:'长度在5到16个任意字符', trigger:'blur'}
        ],
        username:[
          {required:true,message:'请输入登录账号',trigger: 'blur'},
          {min: 5 ,max:16,message:'长度在6到16个任意字符',trigger:'blur'}
        ],
        code: [
          { required: true,message:'请输入验证码', trigger: 'blur' }
        ]
      },
    }
  },
    mounted () {
      this.saveCaptcha()
    },

  methods:{
    //重置
    resetForm(loginForm) {
      this.$refs.loginForm.resetFields();
    },
    //登录
    /*
      == 用来比较或者判断两者是否相等，比较时可以自动转换数据类型
      === 用来较为严格的比较，除判断数据2这是否相等 ，还会判断两者数据类型是否相同 如不相同也不会转换数据类型 。返回（false
    */
    async login(){   
      // this.$refs[this.loginForm].validate 这种会提示validate未定义
      this.$refs.loginForm.validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          user.login(qs.stringify(this.loginForm, {arrayFormat: 'indices', allowDots: true})).then(res =>{
            if(res.data.code ==='000'){
              //登录
              this.$store
              .dispatch('user/login', res.data.data)
              .then( response =>{
                this.$router.push({path:'/personalCenter/index'})
              })
              this.$message({
                message: '登录成功',
                type: 'success'
              })     
            }else if(res.data.code ==='444') {

              this.$message.error('验证码错误，请重新输入');
            }else if(res.data.code ==='445') {

              this.$message.error('用户名或密码错误');              
            }else {
              this.$message.error('没有权限可以访问');
            }  
          })        
        }else {   //校验不通过
          return false;
        }
      });

    },
    //获取验证码
    saveCaptcha(){
      user.saveCaptcha().then(res =>{
        if(res.data.code === '000'){
          this.captchaImg=res.data.data;
          // console.log(this.captchaImg);
        }
      })
    }

  }

}
</script>

<style>
  .outer_inner{
    background:url(".././../assets/img/xingkong2.jpg") no-repeat center ;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size:100% 100%;
    position: relative;
  }
  .inner_box{
    position: absolute; 
    z-index: 999;
    top:10%;
    left:10%;
    /* opacity: 0.7; */
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 50px auto;
    width: 400px;
    padding: 35px 35px 15px 35px;
    background: #eaf4fc;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .item-padding{
    margin-right: 50px;
  }

</style>
